<template>
  <div class="radio" @click="changeState">
      <img :src="imgSrc">
  </div>
</template>

<script>
  export default {
    name: 'Radio',
    props: {
      active: Boolean
    },
    data() {
      return {
        isActive: this.active
      }
    },
    computed: {
      imgSrc: function () {
        return this.isActive ? require('@/assets/radio-enable.png') : require('@/assets/radio-disable.png')
      },
    },
    methods: {
      changeState: function() {
        this.isActive = !this.isActive;
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .radio img {
    width: 25px;
    height: 25px;
  }
</style>
